<style lang="less">
.logon {
    background-image: url(./img/logonBg.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    .content-warp {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 550px;
        height: 355px;
        background-image: url(./img/logonBg1.png);
        background-repeat: no-repeat;
        background-size: contain;
        .content {
            position: relative;
            width: 286px;
            margin: 0 auto;
            .ant-form{
                width: 100%;
            }
        }
        .login-form{
            padding-top: 150px;
            width: 410px;
            .ant-form-explain{
                margin-top: 1px;
                padding-left: 30px;
                color: #ff0000;
                margin-bottom: -13px;
                font-size: 12px;
            }
            .inp{
                position: relative;
                margin-bottom: 15px;
            }
            .inp .icon{
                width: 20px;
                height: 28px;
                background-image: url('./img/user.png');
                background-size: contain;
                background-repeat: no-repeat;
                display: block;
                position: absolute;
                top: 50%;
                left: 10px;
                transform: translate(0,-50%);
            }

            .paws .icon{
                width: 24px;
                height: 24px;
                background-image: url('./img/edit.png');
            }

            .ant-input{
                width: 286px;
                height: 36px;
                background-color: transparent;
                border: 2px solid #FFFFFF;
                border-radius: 4px;
                font-size: 16px;
                color: #FFFFFF;
                padding-left: 38px;
                font-weight: 500;
            }
            .ant-input:focus{
                border: 1px solid #009688;
            }
            .ant-input::placeholder{
                color: #FFFFFF;
            }
        }
        .submit-btn{
            width: 86px;
            height: 38px;
            line-height: 38px;
            float: right;
            position: relative;
            color: #FFFFFF;
            text-align: center;
            background-image: url('./img/loginBtn.png');
            background-size: contain;
            background-repeat: no-repeat;
            cursor: pointer;
        }
    }
}
</style>
<template>
    <div class="logon">
        <div class="content-warp">
            <div class="content">
                <a-form-model class="login-form" ref="form" :model="loginInfo" :rules="rules">
                    <a-form-model-item label prop="user" class="inp">
                        <a-input v-model="loginInfo.user" :maxLength="20"  :placeholder="'在这里输入登录名'" />
                        <i class="icon"></i>
                    </a-form-model-item>
                    <a-form-model-item label prop="pass" class="inp paws">
                        <a-input-password v-model="loginInfo.pass" :maxLength="20" :placeholder="'在这里输入密码'"/>
                        <i class="icon"></i>
                    </a-form-model-item>
                    <div class="submit-btn" @click="postBox()"></div>
                </a-form-model>
            </div>
        </div>
    </div>
</template>

<script>
import config from '@/config'
import backgroundImg from '../../../public/img/login_bg.png';
import { getCodeImg, login } from '@/api/login';
import { lenRule, notEmptyRule } from '@/appBase/formRules';
export default {
    data() {
        return {
            backgroundImg,
            captchaImage: '',
            loginInfo: {
                user: '',
                pass: '',
                code: '',
            },
            randomCode: '',
            config,
            rules: {
                user: [notEmptyRule({ message:'请输入登录名'}), lenRule({ max: 20 })],
                pass: [notEmptyRule({ message:'请输入密码'}), lenRule({ max: 20 })],
                code: [notEmptyRule(), lenRule({ max: 20 })]
            },
            // 验证码开关
            captchaOnOff: true
        };
    },
    watch: {
    },
    computed: {
        enCopyright: () => config.enCopyright || config.copyright,
        copyright: () => config.copyright
    },
    created() {
        var _this = this;
        document.onkeydown = function (e) { // 回车提交表单
            // 兼容FF和IE和Opera
            var theEvent = window.event || e;
            var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
            if (code == 13) {
                _this.postBox()
            }
        }
    },
    beforeDestroy() {
        document.onkeydown = function (e) {
            var key = window.event.keyCode
            if (key === 13) {

            }
        }
    },
    mounted: function () {
        // TODO: 调试阶段保留
        // this.loginInfo.user = 'admin';
        // this.loginInfo.pass = 'admin123';
        this.getRandomCode();
    },
    methods: {
        changeVerify() {
            this.getRandomCode();
        },
        postBox() {
            if (!this.loginInfo.user) {
                this.$message.error('请输入正确用户名');
                this.getRandomCode();
                return false;
            }
            if (!this.loginInfo.pass) {
                this.$message.error('请输入正确密码');
                this.getRandomCode();
                return false;
            }

            if (!this.loginInfo.code && this.captchaOnOff) { //服务端生成验证码不用判断验证码是否正确
                this.isshowItem = 1;
                this.isshowIcon = 1;
                this.istype = 2;
                this.inputType = 'yzm';
                this.isyzmcheck = true;
                this.yzmTs = '请输入正确验证码'
                this.$message.error('请输入正确验证码');
                this.getRandomCode();
                return false;
            }
            login({
                username: this.loginInfo.user.trim(),
                code: this.loginInfo.code,
                password: this.loginInfo.pass,
                uuid: this.randomCode
            }).then((result) => {
                // const data = res.data||{};
                console.log(result);
                this.$store.commit('UpdateToken', result.token);
                this.$message.success('登录成功');
                setTimeout(() => {
                    this.$router.push(config.homeIndex);
                }, 500);
            }).catch(err => {
                this.getRandomCode();
            });
        },
        //获取随机码
        getRandomCode() {
            getCodeImg().then(res => {
                const data = res || {};
                this.captchaOnOff = data.captchaOnOff;
                if (data.captchaOnOff == true) {
                    this.randomCode = data.uuid;
                    this.captchaImage = 'data:image/gif;base64,' + data.img;
                }
            });
        }
    }
}
</script>
